<template>
  <div id="main">
    <div class="content">
      <!-- 按钮部分 -->
      <div class="button">
        <div class="button1">
          <button class="bu" @click="changeAll">修改昵称</button>
          <button class="bu" >修改头像</button>
          <button class="bu" @click="changePwd">修改密码</button>
        </div>
      </div>
      <!-- 资料部分 -->
      <div class="box" v-if="flag_chose == 1">
        <div class="inputbox">
          <label for="account" style="margin-top: 60px">账号：</label>
          <input autocomplete="off"
            v-model="account"
            type="text"
            name="account"
            readonly="true"
            value=""
          />
        </div>
        <div class="inputbox">
          <label for="name">昵称：</label>
          <input autocomplete="off"
            v-model="name"
            type="text"
            name="uid"
            :readonly="isChanging ? false : 'readonly'"
            required=""
          />
        </div>
        <div class="inputbox">
          <label for="phone">电话：</label>
          <input autocomplete="off"
            v-model="phone"
            type="text"
            name="phone"
            :readonly="isChanging ? false : 'readonly'"
            required=""
          />
        </div>
        <div class="inputbox">
          <label for="gender">性别：</label>
          <input autocomplete="off"
            v-model="gender"
            type="text"
            name="gender"
            :readonly="isChanging ? false : 'readonly'"
            required=""
          />
        </div>
        <div class="inputbox">
          <label for="address">地址：</label>
          <input autocomplete="off"
            v-model="address"
            type="text"
            name="address"
            :readonly="isChanging ? false : 'readonly'"
            required=""
          />
        </div>
        <div class="buttons">
          <input
            v-if="!isChanging"
            @click="changeAll"
            type="button"
            class="button"
            value="修改"
          />
          <input @click="submitAll" type="button" class="button" value="提交" />
          <input
            @click="cancelUpdate"
            type="button"
            class="button"
            value="取消"
          />
        </div>
      </div>

      <!--修改密码-->
      <div class="right" v-if="flag_chose == 2">
        <div class="box1">
          <div class="inputbox">
            <label for="password0">旧密码：</label>
            <input autocomplete="off"
              v-model="password0"
              type="password"
              placeholder="请输入旧密码"
            />
          </div>
          <div class="inputbox">
            <label for="password">新密码：</label>
            <input autocomplete="off"
              v-model="password"
              type="password"
              placeholder="请输入新密码"
            />
          </div>
          <div class="inputbox">
            <label for="password1">确认密码：</label>
            <input autocomplete="off"
              v-model="password1"
              type="password1"
              name=" "
              placeholder="请再次输入新密码"
              required=""
            />
          </div>
          <!--发送验证码-->
          <div class="inputbox" id="email">
            <label for="email">邮箱：</label>
            <input autocomplete="off"
              v-model="email"
              type="text"
              name=" "
              placeholder="请输入邮箱"
              required=""
            />
            <br />
            <button
              class="send"
              v-if="showbtn"
              type="button"
              @click="sendEmail"
            >
              发送验证码
            </button>
            <button class="send red" v-if="!showbtn" type="button">
              {{ sec }}
            </button>
          </div>
          <div class="inputbox">
            <label for="checkemail">邮箱验证码：</label>
            <input autocomplete="off"
              placeholder="请输入收到的邮箱验证码"
              v-model="checkEmail"
              type="text"
              name="checkemail"
              required=""
            />
            <br />
            <button class="button" type="button" @click="submitCheck">
              <div>Submit</div>
            </button>
          </div>
          <div v-show="tipMessage.length > 0" style="color: red">
            <p class="tip">{{ tipMessage }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import { mapState } from 'vuex';
export default {
  name: 'person',
  data() {
    return {
      id: '',
      name: '',
      password: '',
      password0: '',
      password1: '',
      email: '',
      checkEmail: '',
      gender: '',
      // birth: '',
      phone: '',
      address: '',
      tipMessage: '',
      showbtn: true,
      isChanging: false,
      flag_chose: 1,
      sec: '',
    };
  },
  computed: {
    ...mapState(['account']),
  },
  methods: {
    //修改资料
    changeAll() {
      this.flag_chose = 1;
      this.isChanging = true;
    },
    //修改密码
    changePwd() {
      this.flag_chose = 2;
      this.password0 = '';
    },
    cancelUpdate() {
      window.location.href = '/person';
    },
    //发送验证码
    async sendEmail() {
      try {
        const res = await this.$axios.post(`http://work.caike.online/user`, {
          action: 'email',
          email: this.email,
        });
        console.log(res);
        const info = res.data;
        if (info.num != null) {
          this.code = info.num;
          this.showbtn = false;
          //时间间隔
          this.sec = 300;
          setInterval(() => {
            this.sec = this.sec - 1;
            if (this.sec == 0) {
              this.showbtn = true;
            }
          }, 1000);
        } else {
          this.$message({
            message: '验证码发送失败',
            type: 'error',
            offset: 70,
          });
        }
      } catch (err) {
        this.$message({
          message: '发送失败,请刷新页面重试！',
          type: 'error',
          offset: 70,
        });
        console.log(err);
      }
    },
    validate() {
      // 表单验证
      if (this.email.length === 0) {
        this.tipMessage = '还没有填写邮箱！';
        return false;
      } else if (this.password0.length === 0) {
        this.tipMessage = '还没有填写密码！';
        return false;
      } else if (this.password.length < 8) {
        this.tipMessage = '密码长度不得小于8位';
        return false;
      } else if (this.password1.length === 0) {
        this.tipMessage = '还没有填写确认密码！';
        return false;
      } else if (this.checkemail.length === 0) {
        this.tipMessage = '还没有填写邮箱验证码！';
        res = false;
      } else if (this.password !== this.password1) {
        this.tipMessage = '两次密码输入不一致！';
        return false;
      }
      return true;
    },
    async submitAll() {
      if (!this.validate) {
        this.$message({
          message: '信息未填写完整',
          type: 'error',
          offset: 70,
        });
      }
      try {
        const res = await this.$axios.post(`http://work.caike.online/user`, {
          action: 'updateInfo',
          id: this.ownerId,
          name: this.name,
          account: this.account,
          email: this.email,
          password: this.password0,
          phone: this.phone,
        });
        console.log(res);
        const info = res.data;
        if (info.status === 1) {
          this.$message({
            message: '资料修改成功',
            type: 'success',
            offset: 70,
          });
          window.location.href = '/person';
        } else {
          this.$message({
            message: '修改资料失败',
            type: 'error',
            offset: 70,
          });
          console.log('出现错误，发送失败！');
        }
      } catch (err) {
        this.$message({
          message: '请求发送失败',
          type: 'error',
          offset: 70,
        });
        console.log(err);
      }
    },
    //提交按钮
    async submitCheck() {
      this.tipMessage = '';
      if (this.checkEmail != this.code) {
        this.tipMessage = '邮箱验证码错误！';
        return;
      }
      if (this.validate) {
        try {
          const res = await this.$axios.post(`http://work.caike.online/user`, {
            action: 'updatePsd',
            email: this.email,
            password: this.password,
          });
          console.log(res);
          const info = res.data;
          if (info.status === 1) {
            this.$message({
              message: '密码修改成功',
              type: 'success',
              offset: 70,
            });
            window.location.href = '/login';
          } else {
            this.$message({
              message: '修改密码失败',
              type: 'error',
              offset: 70,
            });
            console.log('出现错误，发送失败！');
          }
        } catch (err) {
          this.$message({
            message: '发送失败',
            type: 'error',
            offset: 70,
          });
          console.log(err);
        }
      }
    },
    //接受数据
    async receive() {
      console.log('account=> ', this.account);
      try {
        // const res = await this.$axios.post(`${this.HOST}/user`, {
        const res = await this.$axios.post(`http://work.caike.online/user`, {
          action: 'getInfo',
          account: this.account,
        });
        console.log(res);
        if (res.data.status == 1) {
          const info = res.data.info;
          this.id = info.id;
          this.name = info.name;
          this.address = info.address;
          this.gender = info.gender;
          this.phone = info.phone;
          this.birth = info.birth;
          this.password0 = info.password;
        }
      } catch (err) {
        // alert('登录失败呢'),
        this.$message({
          message: '访问失败',
          type: 'error',
          offset: 70,
        });
        console.log(err);
      }
    },
  },
  mounted() {
    this.receive();
  },
};
</script>

<style lang="less" scoped>
#main {
  // 由于图像的 z-index 是 -1，因此它在文本的后面出现
  position: fixed;
  top: 0;
  left: 0;

  background-position: center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  /* // 用浮点数来定义缩放比例。不允许负值 */
  zoom: 1;
  width: 100%;
  height: 100%;

  // background-image: url('../assets/bg/1.jpeg');

  background-image: url(../assets/bg/0.jpeg);
  // https://i.loli.net/2021/01/09/aN62qiFfjXVRx1E.png
  .content {
    margin-top: 60px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    // margin-left:0;
    // justify-content: flex-end;

    // background:black;

    .button {
      padding-top: 30px;
      width: 220px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-content:center;
      // padding-right: 50px;
      // background: rgba(0, 0, 0, 0.2);
      border-right: 2px solid whitesmoke;
      border-image: linear-gradient(transparent, whitesmoke, transparent) 2 1;
      // background:black;
      //头像

      .button1 {
        display: flex;
        height: 100%;
        padding: 5px 10px;
        flex-direction: column;
        // justify-content: space-between;
        align-content: center;
      }

      .bu {
        height: 60px;
        background: rgba(0, 0, 0, 0.3);
        outline: none;
        color: white;
        font-size: 18px;
        border: 1px solid transparent;
        border-radius: 15px;
        margin-bottom: 10px;
      }
      .bu:hover {
        color: #03a9f4;
        cursor: pointer;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.664);
        transition: all 0.5s ease;
      }
    }
    .box {
      flex-grow: 1;
      width: 500px;
      padding: 50px;
      background: rgba(0, 0, 0, 0.3);
      /*背景颜色为黑色，透明度为0.8*/
      box-sizing: border-box;
      /*box-sizing设置盒子模型的解析模式为怪异盒模型*/
      box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
      /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
      border-radius: 15px;
      /*边框圆角，四个角均为15px*/

      //设置相对位置使得位于上面
      .inputbox {
        input {
          // padding-top: 20px;
          cursor: pointer;
          width: 400px;

          //拉宽上下距离
          text-align: center;
          font-size: 16px;
          color: #fff;
          letter-spacing: 1px;
          /*字符间的间距1px*/
          padding: 10px 0;
          margin-bottom: 28px;

          border: none;
          border-bottom: 1.2px solid #ccc;
          border-radius: 10px;
          outline: none;
          /*outline用于绘制元素周围的线*/
          background: transparent;
          /*背景颜色为透明*/
        }

        label {
          /*<label> 标签为 input 元素定义标注（标记）*/
          // top: 0px;
          // left: 0px;
          // padding: 10px 0;
          width: 110px;
          font-size: 16px;
          color: #fff;
        }
      }

      .buttons {
        display: flex;
        justify-content: center;
        width: 100px;
        margin: 5px auto;
        // height: 10px;
        font-size: 10px;

        .button {
          padding: 2px 5px;
          margin: 5px 10px;
          border-radius: 15px;
          background-color: transparent;
          color: white;
          outline: none;
        }
        .button:hover {
          cursor: pointer;
          box-shadow: 1px 1px 3px grey;
          transition: all 0.8s ease;
        }
      }
    }
    // 第二个页面
    .right {
      background: rgba(0, 0, 0, 0.3);
      // background:black;
      flex-grow: 1;

      //  display:flex;
      //      justify-content:center;

      .box1 {
        height: auto;
        // width: 500px;
        // margin:0px auto;
        display: flex;
        flex-direction: column;
        max-height: 80%;
        justify-content: space-around;
        align-items: center;
        margin-top: 60px;

        box-sizing: border-box;
        /*box-sizing设置盒子模型的解析模式为怪异盒模型*/
        // box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
        // border-radius: 15px;
        /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/

        //  background: rgba(0, 0, 0, 0.3);
        /*边框圆角，四个角均为15px*/

        //设置相对位置使得位于上面
        .inputbox {
          .circle {
            // display:inline-block;
            text-align: center;
            //  background: rgba(0, 255, 0, 0.3);
            background: #ccc;
            margin-top: 10px;
            margin-left: 10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;

            left: 50%;
          }
          // background: rgba(0, 0, 0, 0.3);
          input {
            // padding-right: 15px;
            // padding-left:15px;
            // float:right;
            //拉宽上下距离
            width: 300px;
            text-align: center;
            width: 400px;
            //拉宽上下距离
            // text-align: center;
            font-size: 16px;
            color: #fff;
            letter-spacing: 1px;
            /*字符间的间距1px*/
            padding: 10px 0;
            margin-bottom: 28px;
            border: none;
            border-bottom: 1.2px solid #ccc;
            // border-radius: 10px;
            outline: none;
            /*outline用于绘制元素周围的线*/
            background: transparent;
            //  background:black;
            /*背景颜色为透明*/
          }

          .send {
            //520
            background: black;
            height: 35px;
            width: 125px;
            margin: 0 auto;
            margin-right: 0px;
            border: none;
            outline: none;
            font-size: 8px;
            color: #fff;
            background: #0e67db73;
            padding: 10px 10px;
            /* test-align: center; */
            cursor: pointer;
            /*光标呈现为指示链接的指针（一只手）*/
            border-radius: 10px;
          }
          .button {
            width: 70px;
            padding: 2px 2px;
            margin: 5px auto;
            border-radius: 15px;
            background-color: transparent;
            color: white;
            outline: none;
            font-size: 16px;

          div{
            margin:0px auto;
          }
          }
          .button:hover {
            cursor: pointer;
            box-shadow: 1px 1px 3px grey;
            transition: all 0.8s ease;
          }
          label {
            color: white;
            left: 0px;
            padding-left: 0;
            text-align: end;
            display: inline-block;
            width: 110px;
            margin-right: 8px;
            font-size: 16px;
            color: #fff;
          }

          .red {
            cursor: none;
            background-color: rgba(255, 0, 0, 0.514);
          }

          .submit {
            height: 35px;
            width: 125px;
            margin: 5px;
            margin-right: 0px;
            border: none;
            outline: none;
            font-size: 8px;
            color: #fff;
            background: black;
            padding: 10px 10px;
            cursor: pointer;
            border-radius: 10px;
          }
        }
        #email {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          input {
            width: 265px;
          }
          button {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
